<template>
  <div class="holiday-manger-warp">
    <div class="holiday-header">
      <button class="form-btn" @click="showAdd">添加</button>
    </div>
    <div class="holiday-table-warp">
      <table class="holiday-plan-table">
        <thead>
          <tr>
            <td>节日</td>
            <td>放假时间</td>
            <td>调休日期</td>
            <td>放假天数</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,i) in holidayPlans" :key="i">
            <td>{{ item.name }}({{ item.date | fmtDate }})</td>
            <td>{{ item.restDays | fmtHolidayPlan }}</td>
            <td>
              {{ item.workDays | fmtWorkDayPlan }}
            </td>
            <td>{{ item.restDays.length }}天</td>
            <td>
              <span class="iconfont icon-delete" @click="delHolidayPlan(i)" />
              <span class="iconfont icon-edit" @click="showEdit(item)" />
            </td>
          </tr>
          <tr v-if="holidayPlans.length===0">
            <td colspan="5" align="center">暂无放假安排</td>
          </tr>
        </tbody>
      </table>
    </div>
    <Dialog v-model="isShow" :title="title" class="holiday-dialog">
      <HolidayForm ref="form" class="holiday-form" @add-plan="addHolidayPlan" />
    </Dialog>
  </div>
</template>

<script>
import HolidayForm from './HolidayForm'
import Dialog from '../../../components/Dialog'
import Confirm from '../../../components/Confirm'
import Message from '../../../components/Message'
export default {
  name: 'HolidayManger',
  components: {
    HolidayForm,
    Dialog
  },
  filters: {
    fmtWorkDayPlan(dates) {
      const arr = Object.assign([], dates)
      const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const days = arr.map((item) => {
        const arr1 = item.split('-')
        // eslint-disable-next-line prefer-const
        let [year, month, date] = arr1
        const oDate = new Date(year, month - 1, date, 0, 0, 0, 0)
        const day = week[oDate.getDay()]
        month = month > 9 ? month : '0' + month
        date = date > 9 ? date : '0' + date
        return {
          year,
          month,
          date,
          day,
          dateString: month + '月' + date + '日(' + day + ')',
          time: oDate.getTime()
        }
      })
      days.sort((a, b) => {
        return a.time - b.time
      })
      if (days.length === 1) {
        return days[0].dateString
      }
      if (days.length >= 2) {
        const strArr = []
        days.forEach((item) => {
          strArr.push(item.dateString)
        })
        return strArr.join(',')
      }
      return '无调休安排'
    },
    fmtHolidayPlan(dates) {
      const arr = Object.assign([], dates)
      const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const days = arr.map((item) => {
        const arr1 = item.split('-')
        // eslint-disable-next-line prefer-const
        let [year, month, date] = arr1
        const oDate = new Date(year, month - 1, date, 0, 0, 0, 0)
        const day = week[oDate.getDay()]
        month = month > 9 ? month : '0' + month
        date = date > 9 ? date : '0' + date
        return {
          year,
          month,
          date,
          day,
          dateString: month + '月' + date + '日',
          time: oDate.getTime()
        }
      })
      days.sort((a, b) => {
        return a.time - b.time
      })
      if (days.length === 1) {
        return days[0].dateString
      }
      if (days.length >= 2) {
        return days[0].dateString + '~' + days[days.length - 1].dateString
      }
      return '无假期安排'
    },
    fmtDate(dateStr) {
      const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const arr1 = dateStr.split('-')
      // eslint-disable-next-line prefer-const
      let [year, month, date] = arr1
      const oDate = new Date(year, month - 1, date, 0, 0, 0, 0)
      const day = week[oDate.getDay()]
      month = month > 9 ? month : '0' + month
      date = date > 9 ? date : '0' + date
      return year + '年' + month + '月' + date + '日 ' + day
    }
  },
  data() {
    return {
      holidayPlans: [],
      isShow: false,
      title: ''
    }
  },
  created() {
    const plansJson = localStorage.getItem('HOLIDAY_PLANS')
    if (plansJson) {
      this.holidayPlans = JSON.parse(plansJson)
    }
  },
  methods: {
    addHolidayPlan(item) {
      const staticPlan = JSON.parse(JSON.stringify(item))
      if (staticPlan.id) {
        const i = this.findIndex(staticPlan)
        if (i !== -1) {
          this.holidayPlans[i] = staticPlan
          Message.success('修改成功！')
        } else {
          staticPlan.id = new Date().getTime()
          this.holidayPlans.push(staticPlan)
          Message.success('添加成功！')
        }
      } else {
        staticPlan.id = new Date().getTime()
        this.holidayPlans.push(staticPlan)
        Message.success('添加成功！')
      }
      localStorage.setItem('HOLIDAY_PLANS', JSON.stringify(this.holidayPlans))
      this.isShow = false
    },
    delHolidayPlan(i) {
      Confirm('确定要删除该条记录吗？').then(() => {
        this.holidayPlans.splice(i, 1)
        localStorage.setItem('HOLIDAY_PLANS', JSON.stringify(this.holidayPlans))
        Message.success('删除成功！')
      }).catch(() => {

      })
    },
    getHolidayMark(lunar) {
      const marks = {}
      this.holidayPlans.forEach((item) => {
        const { restDays, workDays } = item
        restDays.forEach((rest) => {
          marks[rest] = { date: rest, type: 'rest', label: '休', className: 'rest-tag' }
        })
        workDays.forEach((work) => {
          marks[work] = { date: work, type: 'work', label: '班', className: 'work-tag' }
        })
      })
      const sDate = lunar.cYear + '-' + lunar.cMonth + '-' + lunar.cDay
      if (marks[sDate]) {
        return marks[sDate]
      } else {
        return {}
      }
    },
    showEdit(item) {
      const plan = JSON.parse(JSON.stringify(item))
      this.$refs['form'].resetForm(plan)
      this.title = '修改假期安排'
      this.isShow = true
    },
    showAdd() {
      this.$refs['form'].resetForm()
      this.title = '添加假期安排'
      this.isShow = true
    },
    findIndex(plan) {
      let index = -1
      for (let i = 0; i < this.holidayPlans.length; i++) {
        const item = this.holidayPlans[i]
        if (item.id === plan.id) {
          index = i
          break
        }
      }
      return index
    }
  }
}
</script>

<style lang="less" scoped>
  .holiday-plan-table{
    width: 100%;
    border-collapse: collapse;
  }
  .holiday-plan-table td{
    font-size: 14px;
    border: 1px solid #e6e6e6;
    line-height: 20px;
    padding: 5px 8px;
    word-break: normal;
  }
  .holiday-plan-table thead tr{
    background: #f3f3f3;
  }
  .holiday-plan-table tbody tr:nth-child(even){
    background-color: #f9f9f9;
  }
  .holiday-plan-table tbody tr:hover{
    background-color: rgba(58, 142, 230, 0.09);
  }
  .holiday-plan-table thead td{
    color: #333;
    font-weight: 500;
  }
  .holiday-plan-table tbody td{
    color: #444;
  }
  .holiday-plan-table tbody td span{
    color: #717171;
    font-size: 16px;
    margin: 0 5px;
    cursor: pointer;
  }
  .holiday-plan-table tbody td span:hover{
    color: #3a8ee6;
  }
  .form-btn{
    cursor: pointer;
    min-width: 40px;
    text-align: center;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding:  5px 8px;
    border-radius: 4px;
    outline: none;
    border: 1px solid #2d7dff;
    font-size: 14px;
    color: #ffffff;
    background-color: #2d7dff;
    box-sizing: content-box;
  }
  .holiday-header{
    margin-bottom: 15px;
  }
  .holiday-form{
    width: 460px;
    padding: 30px 30px 15px 15px;
  }
  .holiday-dialog/deep/ .dialog-container{
    top: 40%;
  }
</style>
